<template>
	<div class='page me-login' v-bind:class="{overflow:isOverflow}">
		<template v-if="!getUser&&!vipInfo.vip">
			<div class='logo flex flex-item-center'>
				<img src='http://zafgoos.oss-cn-shanghai.aliyuncs.com/H5/huaban_logo.png' />
			</div>
			<div class='username flex  flex-item-v-center'>
				<label>手机号</label>
				<input type='tel' v-model="phone" @keyup="validation" placeholder='请输入手机号' maxlength="11" size="11" />
			</div>
			<div class='username flex flex-item-v-center'>
				<label>验证码</label>
				<input v-if="phone.length==11&&disabled" type="button" v-model="security" class="codebtn" @click="getSmsCode" />
				<input v-else type="button" v-model="security" class="codebtn" />
				<input type='tel' class='Code' v-model="securityCode" placeholder='请输入验证码' maxlength='6' />
			</div>
			<div class='agreement flex flex-1 flex-item-v-center'>
				<div>
					<span class="iconchendx flex flex-item-v-center " :class="[isselect ? 'selected':'']" @click="isSelected($event,isselect)">同意</span>
					<a class='agreement_btn' href="https://xhbtest.feiguotech.com/UserRegister.html">花伴商城注册协议</a>
				</div>
			</div>
			<div class='flex footer loginbtn'>
				<input v-if="phone.length==11&&securityCode.length==6" type="button" value="登录" @click="login" />
				<input v-else type="button" class="nosubmit" value="登录" />
			</div>
		</template>

		<template v-else>
			<div class=' bg flex flex-item-center'>
				<div class='card'>
					<div v-if="isSuccess" class="successMsg">
						<div class='firstMsg'>恭喜您领取花卡会员</div>
						<div class="nextMsg">激活花卡任务</div>
						<div class="lastMsg">邀请5位好友注册花伴账号</div>
					</div>
					<div v-else-if="vipInfo.vip && isSuccess==false" class="successMsg">
						<div class='firstMsg'>您已是花卡会员</div>
						<div class="nextMsg">花卡享平价购物</div>
					</div>
					<div v-else class='mes'>开通花卡享平价购物</div>

					<!--<div class='bottm-box'>
						<div class='vip-t'>
							<div class='open-vip'>
								<div>您已是花卡会员</div>
							</div>
						</div>
						<div class='vip-x'>
							会员权益至{{vipInfo.expireTime}}
						</div>
					</div>-->
				</div>
			</div>
			<div class='flex footer loginbtn'>
				<input type="button" v-if="isSuccess" @click="goHome" value="立即邀请" />
				<input type="button" v-else-if="vipInfo.vip && isSuccess==false" @click="goHome" value="立即使用会员权益 " />
				<input type="button" v-else class="nosubmit" value="今日名额已用完，明天10:00开始 " />

			</div>
		</template>
		<div class="receivelist">
			<div class="receivelist-title flex flex-item-center">今日前十位领取会员用户</div>
			<div v-if="listdata.length" class="receivelist-item flex flex-c">
				<div class="receivelist-item-box flex flex-item-between flex-item-v-center" v-for="item in listdata">
					<span class="usernames">{{item.wxName}}</span>
					<div class="tu-wen flex flex-item-between flex-item-v-center">
						<img class="rc-img" :src="item.wxHeadImg" />
						<span>{{item.accountName}}</span>
					</div>
				</div>
			</div>
			<div v-else="" class="no-list flex flex-item-center">
				暂未有用户领取
			</div>
		</div>

		<modal v-if='isOverflow' v-on:components-modal='removeToast' v-on:content='holdToast'>
			<img slot="title" class="modalTitle" src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/H5/huaban_mini_qrcode.jpeg" />
			<p slot='info' class="modalInfo">长按识别小程序二维码</p>
		</modal>
	</div>

</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from "@/util/util"
	import Modal from '@/components/modal'

	let timer;
	export default {
		data() {
			return {
				security: '获取验证码',
				isselect: true,
				phone: '',
				times: 60,
				disabled: true,
				securityCode: '',
				getUser: '',
				vipInfo: {}, // 判断是否已经是花卡会员
				listdata: [],
				isOverflow: false,
				isSuccess: false, // 判断是否领取成功
				getHours: '',
				loginflag: false
			}
		},
		computed: {

		},
		components: {
			Modal
		},
		created() {
			this.removelocalStorage();
			this.getUserInfo();
			this.GiftVipMemberlist();
			this.getMetaTitle();
		},
		methods: {
			removelocalStorage() {
				sessionStorage.removeItem('user_info')
				sessionStorage.removeItem('plus_token')
			},
			isSelected(e, isselect) {
				this.isselect = !isselect
			},
			goHome() {
				this.isOverflow = true
			},
			getUserInfo() {
				http.post(Api.userGetVipUserInfo)
					.then((d) => {
						if(d.code == 200) {
							if(d.data.expireTime) {
								var time = d.data.expireTime.replace(/-/g, '/');
								time = new Date(time);
								d.data.expireTime = utils.format(time, 'yyyy.MM.dd')
							}
							this.vipInfo = d.data;
							let time = new Date();
							if(this.vipInfo.checkVipIsAccpet) {
								this.isSuccess = true
								this.toast('您已领取会员,待激活会员')
								this.getUser = utils.getUsersessionInfo();
								return;
							}
							if(this.loginflag && !this.vipInfo.vip && time.getHours() >= 10) {
								this.checkVipActiveGet();
							} else if(this.loginflag&&time.getHours() < 10 && !this.vipInfo.vip) {
								this.toast('今日活动未开始，上午10:00开始领取，请注意时间')
							}
						} else {
							this.toast(d.message);
						}
					})
					.catch((e) => {
						console.log(e);
					})
			},
			login() {
				this.removelocalStorage();
				if(!(/^1[345678]\d{9}$/.test(this.phone))) {
					this.toast('手机号码有误')
				}
				http.post(Api.loginLogin, {
					phone: this.phone,
					securityCode: this.securityCode,
					channelCode: this.$route.query['channelCode'] || 'HUABAN'
				}).then((d) => {
					if(d.code == 200) {
						this.loginflag = true;
						sessionStorage.setItem('plus_token', d.data.token)
						this.getUserInfo();
						sessionStorage.setItem('user_info', JSON.stringify(d.data))
					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					this.toast('登录失败，请检查您的网络')
				})
			},
			GiftVipMemberlist() {
				http.post(Api.listGiftVipMember)
					.then((d) => {
						if(d.code == 200) {
							this.listdata = d.data;
							console.log(d.data)
						}
					}).catch((e) => {
						console.log(e)
					})
			},
			checkVipActiveGet() { // 判断是否领取成功
				http.post(Api.checkVipActiveGet)
					.then((d) => {
						this.getUser = utils.getUsersessionInfo();
						if(d.code == 200 && d.data) {
							this.GiftVipMemberlist();
							this.isSuccess = true
							this.toast('恭喜您领取会员成功，请激活')
						} else {
							this.isSuccess = false
							let time = new Date();
							if(time.getHours() >= 10 && !this.vipInfo.vip) {
								this.toast('今日会员已领完，请明天10:00领取')
							} 
						}
					}).catch((e) => {
						this.toast('当前领取人数过多，请稍后重试')
						this.getUser = utils.getUsersessionInfo();
						this.getUserInfo();
					})
			},
			validation() {
				if(this.phone.length == 11) {
					if(!(/^1[345678]\d{9}$/.test(this.phone))) {
						this.toast('手机号码有误')
					}
				}
			},
			getSmsCode() {
				if(!(/^1[345678]\d{9}$/.test(this.phone))) {
					this.toast('手机号码有误')
				}
				http.post(Api.loginGetAuthCode, {
					phone: this.phone
				}).then((d) => {
					if(d.code == 200) {
						this.toast('验证码发送成功，请注意查收')
						this.setCodetime();
						this.disabled = false;
					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					console.log(e)
					this.toast('网络错误,请检查网络')
				})
			},
			setCodetime(e) {
				this.security = (this.times) + "s后获取"
				if(this.times > 1) {
					this.times = this.times - 1
					timer = setTimeout(() => {
						this.setCodetime();
					}, 1000);
				} else {
					this.times = 60;
					this.security = '重发验证码';
					this.disabled = true;
					clearTimeout(timer);
				}
			},
			getMetaTitle() {
				http.post(Api.getMetaTitle, {

				}).then((d) => {
					if(d.code == 200) {
						document.title = d.data.settingName
					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					console.log(e)
					this.toast('网络错误,请检查网络')
				})
			},
			removeToast() {
				this.isOverflow = false
			},
			holdToast() {
				this.isOverflow = true
			}
		},
		filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}
		}

	}
</script>
<style lang="less" rel="stylesheet/less" scoped>
	@import '~@/assets/less/main.less';
	@import './css/index.less';
</style>